<template>
  <div>
    <!--  数据展示  -->
    <el-table
      :data="tableData.slice(5*(this.currentPage-1),(5*this.currentPage))"
      height="270"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="300">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="300">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="300">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    分页-->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :pager-count="5"
      :page-size="5"
      layout="total, prev, pager, next"
      :total="this.tableData.length">
    </el-pagination>
    <!-- 编辑界面 -->
    <el-dialog title="修改" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="formInline" :rules="rules" ref="formInline">
        <el-form-item label="姓名" prop="name">
          <el-input size="small" v-model="formInline.name" auto-complete="off" placeholder="请输姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input size="small" v-model="formInline.age" auto-complete="off" placeholder="请输入年龄"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" class="title" @click="submitForm('formInline')">保存</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name:"updateUser",
  created() {
    this.getData()
  },
  data() {
    return {
      editFormVisible: false, //控制编辑页面显示与隐藏
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ]
      },

      formInline: {
        id:'',
        user: '',
        age: '',
      },
      tableData: [],
      searchTableData:[],
      //分页
      currentPage:"",
    }
  },
  methods:{
    async getData(){
      var _this=this;
      await this.axios({
        method:"get",
        url:"http://192.168.1.3:8080/getData",
      }).then(function (response){
        response.data.forEach((item) => {
          _this.tableData.push({
            id: item.id,
            name: item.name,
            age: item.age,
          })
          _this.searchTableData=_this.tableData;
        });
      });
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true
      this.formInline.id=row.id;
    },
    // 编辑、增加页面保存方法
    async submitForm(editData) {
      this.$refs[editData].validate(async valid => {
        if (valid) {
          var _this = this;
          await this.axios({
            method: "post",
            url: "http://192.168.1.3:8080/updateData",
            data: {
              id:_this.formInline.id,
              name: _this.formInline.name,
              age: _this.formInline.age,
            },
          }).then(function (response) {
            if(response.data=="Ok"){
              _this.editFormVisible = false
              _this.$message.success("保存成功")
            }else {
              _this.editFormVisible = false
              _this.$message.error("保存失败")
            }
          })
          this.tableData = [];
          this.searchTableData = [];
          await this.getData();

        } else {
          this.editFormVisible = false
          this.$message.error('请输入信息')
        }
      })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
    },
    //分页
    handleSizeChange(){
    },
    handleCurrentChange(){
    },
  },
}
</script>

